<template>
  <el-card>
    <el-form ref="dynamicForm" :model="dynamicForm" :rules="dynamicRules" label-width="80px">
      <el-form-item v-for="item in columnsEnableChanged" v-show="!item.hide" :key="item.name" :prop="item.name" :label="item.label" :required="item.required">
        <el-input v-if="item.type === 'input'" v-model="dynamicForm[item.name]" @change="formValueChange"></el-input>

        <el-input-number
          v-else-if="item.type === 'number'"
          v-model="dynamicForm[item.name]"
          :precision="item.options.precision"
          :step="item.options.step"
          :min="item.options.min"
          :max="item.options.max"
          @change="formValueChange"
        ></el-input-number>

        <el-input v-else-if="item.type === 'textarea'" type="textarea" v-model="dynamicForm[item.name]" @change="formValueChange"></el-input>

        <el-select v-else-if="item.type === 'select'" style="width: 100%" v-model="dynamicForm[item.name]" :placeholder="item.placeholder" @change="formValueChange">
          <el-option v-for="opt in item.dataSource" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
        </el-select>

        <el-cascader
          v-else-if="item.type === 'cascader'"
          style="width: 100%"
          v-model="dynamicForm[item.name]"
          :placeholder="item.placeholder"
          :options="item.dataSource"
          @change="formValueChange"
        ></el-cascader>

        <el-switch v-else-if="item.type === 'switch'" v-model="dynamicForm[item.name]" @change="formValueChange"></el-switch>

        <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="dynamicForm[item.name]" @change="formValueChange">
          <el-checkbox v-for="opt in item.dataSource" :key="opt.value" :label="opt.value" :name="item.name">{{ opt.label }}</el-checkbox>
        </el-checkbox-group>

        <el-radio-group v-else-if="item.type === 'radio'" v-model="dynamicForm[item.name]" @change="formValueChange">
          <el-radio v-for="opt in item.dataSource" :key="opt.value" :label="opt.label" :value="opt.value"></el-radio>
        </el-radio-group>

        <el-date-picker
          v-else-if="item.type === 'date'"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 100%"
          :placeholder="item.placeholder"
          v-model="dynamicForm[item.name]"
          @change="formValueChange"
        ></el-date-picker>

        <el-date-picker
          v-else-if="item.type === 'datetime'"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%"
          :placeholder="item.placeholder"
          v-model="dynamicForm[item.name]"
          @change="formValueChange"
        ></el-date-picker>

        <el-time-picker
          v-else-if="item.type === 'time'"
          value-format="HH:mm:ss"
          style="width: 100%"
          :placeholder="item.placeholder"
          v-model="dynamicForm[item.name]"
          @change="formValueChange"
        ></el-time-picker>
      </el-form-item>

      <el-form-item>
        <el-button :type="submit.type" @click="submitForm('dynamicForm')">{{ submit.name }}</el-button>
        <el-button @click="resetForm('dynamicForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      columnsEnableChanged: this.columns,
      dynamicForm: (() => {
        const obj = Object.create(null)
        this.columns.forEach((e) => {
          obj[e.name] = e.defaultValue
        })
        console.log(obj)
        return obj
      })(),
      dynamicRules: (() => {
        const obj = Object.create(null)
        this.columns.forEach((e) => {
          obj[e.name] = e.rules
        })
        console.log(obj)
        return obj
      })()
    }
  },
  props: {
    columns: {
      type: Array,
      default: function () {
        return [
          {
            type: 'input',
            name: 'name',
            label: '活动名称',
            required: true,
            rules: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            options: {}
          },
          {
            type: 'select',
            name: 'region',
            label: '活动区域',
            required: true,
            rules: [{ required: true, message: '请选择活动区域', trigger: 'blur' }],
            dataSource: [
              { label: '上海', value: 'shanghai' },
              { label: '北京', value: 'beijing' }
            ],
            options: {}
          }
        ]
      }
    },
    submit: {
      type: Object,
      default: function () {
        return { name: '提交', type: 'primary' }
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.dynamicForm)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.$emit('change', this.dynamicForm)
    },
    formValueChange() {
      this.$emit('change', this.dynamicForm)
    },
    formItemHiden(name) {
      this.columnsEnableChanged.find((c) => c.name == name).hide = true
      delete this.dynamicForm[name]
    },
    formItemShow(name) {
      this.columnsEnableChanged.find((c) => c.name == name).hide = false
    },
    callback(e) {}
  }
}
</script>
